<template>
  <sun v-model.capitalize="msg" @click.navite="test"/>
  <p>{{ msg }}</p>
</template>
<script>
import {ref, reactive, onMounted, toRefs, watch, computed} from 'vue';
import Sun from "./sun";
import book from "./book";
import MyDialog from "./myDialog";

export default {
  components: {
    Sun,
    book,
    MyDialog
  },
  props: {
    user: {
      type: String,
      required: false,
      default: "hello"
    }
  },
  setup(props, context) {
    // const sunChanged = (obj) => {
    //   console.log(obj);
    // }
    const msg = ref("hello");
    const color = ref("pink");
    const test = (event) => {
      console.log('-----------');
      console.log(event.target);
    }
    return {msg, color, test};
  }
}
</script>
<style scoped>

</style>
